@import "element";

* {
  margin: 0;
  padding: 0;
}

html, body {
  background: $body-bg;
  color: #081333;
  font: {
    family: $body-family;
    size: 14px;
  };
  height: 100%;
}

#app {
  height: 100%;
}

img {
  border: 0;
  vertical-align: top;
}

ul, ol, li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6, b {
  font-weight: normal;
}

i, em {
  font-style: normal;
}

a {
  text-decoration: none;
  outline: none;
  color: #303133;
}

.color-red {
  color: red;
}

//margin pading
.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.pt-12 {
  padding-top: 12px;
}

.pl-12 {
  padding-left: 12px;
}

//width
.w-auto {
  width: auto !important;
}

//内容 ------ 中间一条线
.content-main {
  padding-left: 8px;

  &-title {
    @include flex();
    color: $color-primary;
    margin: 0 0 20px;

    span {
      padding-right: 12px;
    }

    .hr {
      border-top: 1px solid $color-primary;
      flex: 1;
      height: 1px;
    }
  }
}

//接口管理，里面的所有配置
.deploy-title {
  @include flex();
  margin: 0 0 16px;

  span {
    flex: 0 0 auto;
    margin-right: 12px;
    color: #333;
    font: {
      size: 14px;
      weight: bold;
    }
  }

  &-hr {
    flex: 1;
    border: 1px solid $color-primary;
  }

  &-sub {
    width: 220px;
  }
}

.col-5 {
  width: 50%;
}

.bt {
  text-align: center;

  button {
    width: 100%;
    margin-top: 12px;
    height: 32px;
  }
}

//打印表格
.print-table {
  width: 100%;
  border: 1px solid #000;
  border-right: 0;
  border-bottom: 0;

  th {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    line-height: 42px;
  }

  td {
    border: 1px solid #000;
    border-left: 0;
    border-top: 0;
    text-align: center;
    line-height: 42px;
  }

  .s {
    text-align: left;
    padding-left: 12px
  }
}


//新代码生成器
.ml-12 {
  margin-left: 12px !important;
}

.mr-12 {
  margin-right: 12px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-15 {
  margin-top: 15px;
}

.mb-15 {
  margin-bottom: 15px;
}

//长度
.wd180 {
  width: 180px !important;
  flex: 0 0 auto !important;
}

.wd250 {
  width: 250px !important;
  flex: 0 0 auto !important;
}

.code-br {
  border-bottom: 1px solid #dedede;
}

//选饿了吗图标
.e-icon {
  font-size: 18px;
}

//操作按钮
.code-but-operation {
  @include flex();

  .s {
    width: 100px;
    flex: 0 0 auto;
    text-align: right;
    margin-right: 12px;
  }


}

//一行css
.code-but-array {
  @include flex(wrap);

  & > li {
    margin-top: 15px;
    @include flex();

    & > span {
      width: 100px;
      flex: 0 0 auto;
      text-align: right;
      margin-right: 8px;
    }

    .el-input--small .el-input__inner {
      width: 180px;
      flex: 0 0 auto;
    }
  }

  //按钮颜色
  .but-color {
    .el-input--small .el-input__inner {
      width: 90px;
      flex: 0 0 auto;
    }
  }

  .but-color2 {
    .el-input--small .el-input__inner {
      width: 105px;
      flex: 0 0 auto;
    }
  }

  but-color3 {
    .el-input--small .el-input__inner {
      width: 80px;
      flex: 0 0 auto;
    }
  }

  .inpu90 {
    width: 90px;

    .el-input--small .el-input__inner {
      width: 90px;
    }
  }

  //数据类型
  .but-type {
    .el-input--small .el-input__inner {
      width: 140px;
      flex: 0 0 auto;
    }
  }

  .but-icon {
    .el-input--medium .el-input__inner {
      width: 150px;
      flex: 0 0 auto;
    }
  }


  //删除按钮
  .del {
    margin-left: 12px;
  }
}

//折叠
.code-option-css {
  li {
    @include flex();
  }

  span {
    margin: 12px;
  }
}

.code-option-collapse {
  min-width: 200px;
  margin-left: 12px;
}

.code-option-api-css {
  li {
    @include flex();

    .el-input--small .el-input__inner {
      width: 100%;
    }
  }

  label {
    margin: 12px;
    width: 70px;
    text-align: right;
    flex: 0 0 auto;
  }

  .s {
    width: 150px;

    .el-input--small .el-input__inner {
      width: 100%;
    }
  }
}


//第二层变颜色
.code-but-array:nth-of-type(2n) {
  li {
    & > span {
      color: #0e2d87;
    }
  }
}

.code-option-1 {
  .el-input__inner {
    width: 350px !important;
    flex: 0 0 auto;
  }
}

//抽屉长度
.code-drawer {
  width: 1650px
}

.code-drawer1 {
  width: 1620px
}

.code-drawer2 {
  width: 1560px
}


//解析生成  开始
.analysisGeneration-content1 {
  @include flex(nowrap, flex-start, flex-start);

  .analysisGeneration-content1-form {
    @include flex();

    .el-form-item__label {
      width: 120px;
    }

    .s {
      @include flex();
    }
  }

  .demo-css {
    margin-left: 12px;
    @include flex();
  }
}

//数据解析
.analysisGeneration-content2 {
  @include flex();
  margin: 0 0 15px;

  .s {
    flex: 0 0 auto;
    width: 100px;
  }
}

//多个按钮
.analysisGeneration-content3 {
  @include flex();
}

.analysisGeneration-title {
  @include flex();

  span {
    width: 3px;
    height: 14px;
    background-color: #2962ff;
    margin-right: 8px;
  }

  label {
    font-size: 14px;
    color: #17233d;
    font-weight: 600;
    line-height: 20px;
    padding-right: 24px;
  }

  .s {
    flex: 1;
    height: 1px;
    border-bottom: 1px solid #dedede;

  }

  .n {
    cursor: pointer;
    font-size: 14px;
    color: #17233d;
    margin-left: 20px;

    i {
      color: #3385ff;
      font-size: 18px;
    }
  }
}

.analysisGeneration-title2 {
  @include flex();
}

//表格里面的ul
.design-table-ul {
  li {
    @include flex();

    & > span {
      width: 80px;
      flex: 0 0 auto;
      text-align: right;
      margin-right: 8px;
    }
  }
}

//生成api 表格
.analysisGeneration-design-api-content {
  margin-top: 15px;
  margin-bottom: 15px;
}

//dialog form
.analysisGeneration-form-dialog {
  .s {
    @include flex();

    .el-form-item__label {
      flex: 0 0 auto;
      width: 110px;
    }

    .el-form-item__content {
      flex: 1;
    }

    .el-select {
      width: 100%;
    }
  }
}

//按钮属性样式
.design-but-array {
  li {
    @include flex();
    margin-top: 12px;

    & > span {
      flex: 0 0 auto;
      width: 90px;
    }

    .inputWidth {
      width: 150px;
    }
  }
}
